<template>
  <div>
    <div
      v-if="$currentUserInfo"
      style="
        padding-bottom: 10px;
        display: flex;
        align-items: center;
        color: #fff;
      "
    >
      <span style="flex: 1">当前位置：{{ this.stepsLocationName }}</span>
      <div class="btnbox-right">
        <tx-button-add icon="" name="返回上一级" @click="handlePreLevel" />
      </div>
    </div> 
    <Top @getUserInfo="getUserInfo"></Top>
    <switchTab :tabArr="tabArr" @getTabindex="getTabindex"></switchTab>
    <tx-list-table
      :table="table"
      ref="listTable"
      row-key="name"
      v-loading="table.loading"
    >
      <tx-table-column-text label="序号" width="70">
        <template slot-scope="scope">
          <span class="number-index">{{ scope.scope.scope.$index + 1 }}</span>
        </template>
      </tx-table-column-text>
      <tx-table-column-text label="姓名">
        <template slot-scope="scope">{{ scope.row.name }} </template>
      </tx-table-column-text>
      <tx-table-column-text label="单位">
        <template slot-scope="scope">{{ scope.row.workUnit }} </template>
      </tx-table-column-text>
      <tx-table-column-text label="职位">
        <template slot-scope="scope"
          >{{ scope.row.job }}
        </template></tx-table-column-text
      >
      <tx-table-column-text label="手机号">
        <template slot-scope="scope"
          >{{ scope.row.phone }}
        </template></tx-table-column-text
      >
    </tx-list-table>
  </div>
</template>

<script>
import Top from "./components/top.vue";
import switchTab from "@/components/switchTab/index.vue";

export default {
  mixins: [],
  data() {
    return {
      TabIndex: 0,
      tabArr: "",
      userInfo: {
        phone: "",
      },
      table: {
        loading: false,
        query: {},
        sort: {
          descs: ["updateTime"],
        },
        page: this.$yzvue.initPage(),
      },
    };
  },
  watch: {
    "userInfo.phone": {
      handler(val) {
        this.userInfo.phone = val;
        this.loadTable();
      },
    },
  },
  components: {
    Top,
    switchTab,
  },
  computed: {},
  created() {
    this.tabArr = {
      1000000001: [
        {
          name: "党委领导",
          index: 0,
        },
        {
          name: "党委总值班室成员",
          index: 1,
        },
      ],
      1000000002: [
        {
          name: "政府领导",
          index: 0,
        },
        {
          name: "政府总值班室成员",
          index: 1,
        },
      ],
      1000000017: [
        {
          name: "工委领导",
          index: 0,
        },
        {
          name: "工委值班室成员",
          index: 1,
        },
      ],
    }[this.getParameter("menuId")];
  },
  mounted() {
    // this.loadTable();
  },
  methods: {
    getTabindex(e) {
      this.TabIndex = e;
      this.loadTable();
    },
    getUserInfo(val) {
      this.userInfo.phone = val?.phone;
    },
    loadTable() {
      this.table.loading = true;
      // const { data } = await getList({ ...param, });
      let data = {
        body: {
          menuID: this.getParameter("menuId"),
          areaCode: this.$userInfo.areaCode,
          createdBy: this.userInfo.phone,
          isLeader: this.TabIndex == 0 ? 1 : 0,
          orgId: this.$currentUserInfo.orgId || this.$userInfo.orgId,
        },
      };
      this.$api.UserController.list(data, (res) => {
        this.table.loading = false;
        if (res.code == 0) {
          this.$yzvue.assembleBody(this.table.page, {
            records: res?.data,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss">
@import "@/style/variables.scss";

.main-container .manager-detail .tx-detail {
  padding: 0px 0px;
}

.manager-detail {
  // border: 1px solid rgba(61, 126, 165, 0.5);
  // background: linear-gradient(0deg,  #0b3e66 0%,#1c5280 100%);

  .el-form-item__label {
    width: 50%;
    color: $c-font-table;
  }
  .el-form-item__content {
    width: 50%;
    color: $c-font-table;
  }

  .el-form {
    margin: 30px 0px;
    width: 500px;
  }

  .el-input-group__prepend {
    padding: 0px 10px;
  }
  .el-input-group--prepend {
    width: 200px;
  }
  .el-input-group .el-input__inner {
    text-align: right;
  }
  .el-button {
    margin: 0px 10px;
  }
}
</style>
